<template>
  <div class="container">
    <div class="dashboard-container">
      <div class="app-container">
        <el-card shadow="hover">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            ref="selForm"
          >
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="6">
                <el-form-item label="关键字" prop="keyword">
                  <el-input
                    v-model="formInline.keyword"
                    placeholder="根据编号搜索"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="4">
                <el-form-item>
                  <el-button size="medium" @click="resetForm()">清除</el-button>
                  <el-button size="medium" type="primary" @click="getlist()"
                    >搜索</el-button
                  >
                </el-form-item></el-col
              >
            </el-row>
          </el-form>

          <el-alert type="info" show-icon>
            <template #default>
              {{ `当前有${counts}条数据` }}
            </template>
          </el-alert>

          <el-table :data="tableData" stripe>
            <el-table-column prop="id" label="编号"></el-table-column>
            <el-table-column label="题型">
              <template #default="{ row }">
                {{
                  row.questionType === "1"
                    ? "单选"
                    : row.questionType === "2"
                    ? "多选"
                    : "简答"
                }}
              </template>
            </el-table-column>
            <el-table-column prop="questionIDs" label="题目编号" width="230">
              <template #default="{ row }">
                <p v-for="(item,index) in row.questionIDs" :key="index"  style="color:blue;cursor:pointer" @click="see(row,index)">{{item.number}}</p>
              </template>
            </el-table-column>
            <el-table-column label="录入时间" width="200">
              <template #default="{ row }">
                {{ row.addTime | dataFormat }}
              </template>
            </el-table-column>
            <el-table-column
              prop="totalSeconds"
              label="答题时间(s)"
            ></el-table-column>
            <el-table-column
              prop="accuracyRate"
              label="正确率(%)"
            ></el-table-column>
            <el-table-column prop="userName" label="录入人"> </el-table-column>
            <el-table-column label="操作" width="100">
              <template #default="{ row }">
                <el-button
                  icon="el-icon-delete"
                  plain
                  circle
                  type="danger"
                  @click="del(row)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 对话框 -->
          <el-dialog
            title="题目预览"
            :visible.sync="dialogFormVisible"
            width="75%"
            @close="
              isShow = false;
              dialogFormVisible = false;
            "
          >
            <section>
              <el-row :gutter="20" style="margin-bottom: 25px">
                <el-col :span="6"
                  >【题型】:
                  {{
                    questionInfo.questionType === "1"
                      ? "单选题"
                      : questionInfo.questionType === "2"
                      ? "多选题"
                      : "简答题"
                  }}</el-col
                >
                <el-col :span="6">【编号】:{{ questionInfo.id }}</el-col>
                <el-col :span="6"
                  >【难度】:{{
                    questionInfo.difficulty === "1"
                      ? "简单"
                      : questionInfo.difficulty === "2"
                      ? "一般"
                      : "困难"
                  }}</el-col
                >
                <el-col :span="6">【标签】:{{ questionInfo.tags }}</el-col>
              </el-row>
              <el-row :gutter="20" style="margin-bottom: 25px">
                <el-col :span="6"
                  >【学科】:{{ questionInfo.subjectName }}</el-col
                >
                <el-col :span="6"
                  >【目录】:{{ questionInfo.directoryName }}</el-col
                >
                <el-col :span="6">【方向】:{{ questionInfo.direction }}</el-col>
              </el-row>
            </section>
            <hr />
            <section>
              <div>【题干】:</div>
              <div v-html="questionInfo.question" style="color: blue"></div>
              <div>
                <div
                  v-if="
                    questionInfo.questionType === '1' ||
                    questionInfo.questionType === '2'
                  "
                >
                  <span>
                    {{
                      questionInfo.questionType === "1"
                        ? "单选题"
                        : questionInfo.questionType === "2"
                        ? "多选题"
                        : "简答题"
                    }}</span
                  >
                  <span>选项:</span>
                  <span>(以下选中的选项为正确答案)</span>
                </div>
                <div v-if="questionInfo.questionType === '1'">
                  <el-row
                    type="flex"
                    justify=""
                    style="margin: 10px 0px"
                    v-for="item in questionInfo.options"
                    :key="item.id"
                  >
                    <el-col :span="24">
                      <el-radio
                        v-model="isChecked"
                        :label="item.id"
                        v-if="item"
                        disabled
                        >{{ item.title }}</el-radio
                      >
                    </el-col>
                  </el-row>
                </div>
                <div v-if="questionInfo.questionType === '2'">
                  <el-checkbox-group v-model="checkList">
                    <el-row
                      type="flex"
                      justify=""
                      style="margin: 10px 0px"
                      v-for="item in questionInfo.options"
                      :key="item.id"
                    >
                      <el-col :span="24">
                        <el-checkbox
                          :label="item.title"
                          v-if="item"
                          disabled
                        ></el-checkbox>
                      </el-col>
                    </el-row>
                  </el-checkbox-group>
                </div>
              </div>
            </section>
            <hr />
            <section>
              <el-row type="flex" justify="">
                <el-col :span="24">
                  【参考答案】:
                  <el-button type="danger" @click="isShow = true"
                    >视频答案预览</el-button
                  >
                  <br />
                  <video
                    width="320"
                    height="240"
                    controls
                    v-if="isShow && questionInfo.videoURL"
                  >
                    <meta name=referrer content=no-referrer>

                    <source :src="questionInfo.videoURL" type="video/mp4" />
                    您的浏览器不支持Video标签。
                  </video>
                </el-col>
              </el-row>
            </section>
            <hr />
            <section>
              <el-row type="flex" justify="">
                <el-col :span="24">
                  <span>【答案解析】:</span>
                  <div
                    v-html="questionInfo.question"
                    v-if="questionInfo.questionType === '3'"
                  ></div>
                  <span v-html="questionInfo.answer"></span>
                </el-col>
              </el-row>
            </section>
            <hr />
            <section>
              <el-row type="flex" justify="">
                <el-col :span="24">
                  【题目备注】:
                  {{ questionInfo.remarks }}
                </el-col>
              </el-row>
            </section>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false" type="primary"
                >关 闭</el-button
              >
            </div>
          </el-dialog>

          <div style="float: right; margin: 10px">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo.page"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pageInfo.pagesize"
              layout="prev, pager, next,sizes, jumper"
              :total="counts"
            >
            </el-pagination>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { randoms, detail, removeRandoms } from '@/api/hmmm/questions'

import moment from 'moment'
export default {
  name: 'questions',
  data () {
    return {
      formInline: {
        keyword: ''
      },
      counts: null,
      tableData: [],
      pageInfo: {
        page: 1,
        pages: 1,
        pagesize: 20
      },
      dialogFormVisible: false,
      questionInfo: {},
      isShow: false
    }
  },
  created () {
    this.getlist()
  },
  filters: {
    dataFormat (val) {
      return moment(val).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  computed: {
    isChecked () {
      const newarr = this.questionInfo.options.filter(
        (item) => item.isRight === 1
      )
      return newarr[0].id
    },
    checkList () {
      const newarr = this.questionInfo.options.filter(
        (item) => item.isRight === 1
      )
      const arr1 = newarr.map((item) => item.title)
      return arr1
    }
  },
  methods: {
    // 重置表单
    resetForm () {
      this.$refs.selForm.resetFields()
    },
    // 获取表格数据
    async getlist () {
      const newForm = {}
      for (const key in this.formInline) {
        if (this.formInline[key] !== '') {
          newForm[key] = this.formInline[key]
        }
      }
      const { data } = await randoms({ ...this.pageInfo, ...newForm })
      console.log(data)
      this.tableData = data.items
      this.counts = data.counts
    },
    // 试题预览
    async see (row, index) {
      console.log(row, index)
      this.dialogFormVisible = true
      const { data } = await detail(row.questionIDs[index])
      console.log(data)
      this.questionInfo = data
    },
    // 试题编辑
    edit (row) {
      this.$router.push(`/questions/new?id=${row.id}`)
    },
    // 试题删除
    del (row) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data } = await removeRandoms(row)
          console.log(data)
          if (this.pageInfo.page > 1 && this.tableData.length === 1) {
            // 则删除成功之后，当前页的数据条数为 0，需要请求上一页数据
            this.pageInfo.page--
          }
          this.getlist()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 分页
    handleSizeChange (val) {
      this.pageInfo.pagesize = val
      this.pageInfo.page = 1
      this.getlist()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.pageInfo.page = val
      this.getlist()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped lang='scss'>

</style>
